<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="row dfn" @click="onSelectClick(item)">
					<text class="name">{{item.name}}</text>
					<text class="p">{{item.mobile}}</text>
					
					<view class="tag" v-if="item.default == 1">
						默认
					</view>
				</view>
				
				<view class="row cite" @click="onSelectClick(item)">
					<image src="../../../static/fanli/36.png" mode="" class="icon"></image>
					<text>{{item.address}}</text>
				</view>
				
				<view class="row btns">
					<!-- <view class="row btn" @click="onDelClick(item)">
						<image src="../../../static/fanli/37.png" mode="widthFix" class="icon"></image>
						<text>删除</text>
					</view> -->
					
					<view class="row btn" @click="onEditClick(item)">
						<image src="../../../static/fanli/38.png" mode="widthFix" class="icon"></image>
						<text>编辑</text>
					</view>
					
					<view class="row btn" v-if="isSelect" @click="onSelectClick(item)">
						<text>选择</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="nothing" v-if="!loadingMore && list.length == 0">
			<image src="../../../static/fanli/101.png" mode="widthFix" class="icon"></image>
			<text>你还没有添加地址呢，留下一个吧</text>
		</view>
		
		<view class="footer">
			<view class="btn" @click="onAddClick">
				<text>设置地址</text>
			</view>
		</view>
		
		<uni-load-more v-if="loadingMore" :status="loadingMore ? 'loading' : ''"></uni-load-more>
	</view>
</template>

<script>
	import { 
		JSMRequest
	} from '@/module/api'
	import { formatDateTime } from '@/common/util'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	
	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		components: {uniLoadMore},
		
		data() {
			return {
				loaded: false,
				page: 1,
				loadingMore: true,
				isEmpty: true,
				isSelect: false,
				list: [],
			};
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		onLoad(params) {
			let _t = this
			this.getPageData()
			
			if(params.isSelect){
				this.isSelect = params.isSelect
				uni.setNavigationBarTitle({
					title: "选择地址"
				})
			}
			
			WxNotificationCenter.addNotification("event_refresh_cart_confirm_user_address", params => {
				_t.getPageData()
			}, this)
			
			WxNotificationCenter.addNotification("event_refresh_user_address", params => {
				_t.getPageData()
			}, this)
		},
		
		onUnload() {
			WxNotificationCenter.removeNotification("event_refresh_cart_confirm_user_address", this)
			WxNotificationCenter.removeNotification("event_refresh_user_address", this)
		},
		
		methods:{
			onSelectClick (item) {
				if(this.isSelect){
					WxNotificationCenter.postNotificationName("event_refresh_cart_confirm_user_address", item)
					uni.navigateBack({
						
					})
				}
			},
			
			onEditClick (item) {
				uni.navigateTo({
					url: "/pageMe/me/address-update/address-update?item=" + JSON.stringify(item)
				})
			},
			
			onDelClick (item) {
				let _t = this
				
			},
			
			onAddClick () {
				uni.navigateTo({
					url: "/pageMe/me/address-update/address-update"
				})
			},
			
			getPageData () {
				let _t = this
				JSMRequest({
					tag: "jsm-address",
					method: "POST"
				}).then(({data}) => {
					uni.hideLoading()
					if(!_.isEmpty(data)) _t.list = [data]
					_t.loadingMore = false
				}).catch(e => {
					_t.loadingMore = false
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F2F2F2;
	}
</style>

<style lang="less" scoped>
	.list{
		padding: 30px 30px 140px;
		
		.item{
			padding: 30px;
			margin-bottom: 30px;
			background: #FFFFFF;
			border-radius: 20px;
			
			.row{
				display: flex;
				align-items: center;
			}
			
			.dfn{
				
				.name{
					font-size: 32px;
					color: #333333;
				}
				
				.p{
					font-size: 28px;
					color: #333333;
					margin-left: 20px;
				}
				
				.tag{
					font-size: 20px;
					color: #FFFFFF;
					background: #F54E56;
					border-radius: 8px;
					margin-left: 20px;
					padding: 6px 10px;
				}
			}
			
			.cite{
				margin-top: 20px;
				
				.icon{
					width: 24px;
					height: 32px;
				}
				
				text{
					font-size: 28px;
					color: #999;
					margin-left: 20px;
				}
			}
			
			.btns{
				flex-direction: row-reverse;
				margin-top: 20px;
				
				.btn{
					margin-left: 60px;
					
					.icon{
						width: 28px;
					}
					
					text{
						font-size: 28px;
						color: #333;
						margin-left: 10px;
					}
				}
			}
		}
	}
	
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 100px;
		background: #FFFFFF;
		z-index: 10;
		box-shadow: 0px -4px 16px 0px rgba(122,142,216,0.27);
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		
		.btn{
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg,rgba(232,39,32,1) 0%,rgba(255,77,123,1) 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			
			text{
				font-size: 32px;
				color: #FFFFFF;
			}
		}
	}
	
	.nothing{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 100px;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		
		.icon{
			width: 158px;
			margin-bottom: 40px;
		}
		
		text{
			font-size: 28px;
			color: #333;
		}
	}
</style>
